<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.indexedlist.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4718687_km8s2y0m68m.css" />
		<script src="js/mui.min.js"></script>
		<script src="js/mui.indexedlist.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript" charset="utf-8">
		    mui.init({
		        pullRefresh: {
		            container: "#refreshContainer",
		            down: {
		                style: 'circle',
		                color: '#000000',
		                height: '50px',
		                range: '100px',
		                offset: '0px',
		                auto: true,
		                callback: refreshFriendList
		            }
		        }
		    });
		
		    function refreshFriendList() {
		        // 显示加载提示
		        mui('#refreshContainer').pullRefresh().refresh(true);
		
		        // 刷新之前删除当前好友
		        var list = document.querySelectorAll('.refreshFriendList');
		        for (var i = 0; i < list.length; i++) {
		            list[i].remove();
		        }
		
		        // 异步加载好友列表
		        ajaxFriendList();
		    }
			
			function newFriendNum(){
				// alert(1)
				// 待处理好友数量
				util.ajax({
					url: api.newFriendNum,
					data: {},
					success: function(resp) {
						if (resp.code == 200 && resp.httpCode == 200) {
							var newFriendNum = resp.data.newFriendNum;
							if(newFriendNum >= 1){
								document.getElementById("badge").style.display = 'block';
								document.getElementById("badge").innerHTML = newFriendNum;
							} else {
								document.getElementById("badge").style.display = 'none';
							}
						}
					}
				})
			}
			
			mui.plusReady(function() {
				// 定时器 自动刷新待处理好友数量
				setInterval(newFriendNum,5000)
				
				// 给每个好友添加触屏事件
				mui.ready(function () {
					document.getElementById('addFriendBtn').addEventListener('tap',function(){
						//打开好友搜索页面
						plus.webview.open('searchFriend.html','searchFriend.html');
					})
					
					document.getElementById("go_new_friend").addEventListener("tap",function(){
						// 跳转新朋友页面
						plus.webview.open('new_friend.html','new_friend.html');
					})
					
					// 索引列表
					var header = document.querySelector('header.mui-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					window.indexedList = new mui.IndexedList(list);
			
					// 添加好友弹窗
					document.getElementById('addFriendButton').addEventListener('click', function (event) {
						event.preventDefault();
						var dropdownContent = this.nextElementSibling;
						if (dropdownContent.style.display == "block") {
							dropdownContent.style.display = "none";
						} else {
							dropdownContent.style.display = "block";
						}
					});
			
					// 点击页面其他地方关闭下拉菜单
					window.onclick = function (event) {
						if (!event.target.matches('#addFriendButton')) {
							var dropdowns = document.getElementsByClassName("dropdown-content");
							for (var i = 0; i < dropdowns.length; i++) {
								var openDropdown = dropdowns[i];
								if (openDropdown.style.display === "block") {
									openDropdown.style.display = "none";
								}
							}
						}
					}
			
					// 获取本地的好友列表
					var fList = util.getFriendList();
					if (fList) {
						showFriendList(fList);
					} else {
						ajaxFriendList();
					}
				});
			})
		
		    function ajaxFriendList() {
		        var user = util.getUser();
		        // 查询用户的好友
		        util.ajax({
		            url: api.userFriends(user.id),
		            success: function (resp) {
		                if (resp.code == 200 && resp.httpCode == 200) {
		                    // 获取好友列表
		                    var fList = resp.data;
		
		                    // 保存到本地缓存
		                    util.setFriendList(fList);
		
		                    // 分批加载好友列表
		                    loadFriendListInBatches(fList, 10);
		                    mui('#refreshContainer').pullRefresh().endPulldown();
		                }
		            },
		            error: function () {
		                mui('#refreshContainer').pullRefresh().endPulldown();
		            }
		        });
		    }
		
		    function loadFriendListInBatches(fList, batchSize) {
		        var total = fList.length;
		        var start = 0;
		
		        function loadBatch() {
		            if (start >= total) return;
		
		            var end = Math.min(start + batchSize, total);
		            var batch = fList.slice(start, end);
		            showFriendList(batch);
		
		            start = end;
		
		            if (start < total) {
		                setTimeout(loadBatch, 100); // 每100毫秒加载一批
		            }
		        }
		
		        loadBatch();
		    }
		
		    function showFriendList(fList) {
		        for (var i = 0; i < fList.length; i++) {
					var f = fList[i]; // 好友的记录对象
					var fObj = f.friendInfo; // 好友对象
					var pyIndex = fObj.pinyin; // 好友昵称拼音
		
					var liEle = document.getElementById("py_" + pyIndex);
					if (liEle) {
						// 显示好友索引
						liEle.style.display = "block";
		
						var html = "";
						html += '<div class="friend-list">'
						html += '<li class="mui-table-view-cell refreshFriendList list">';
						html += '<a fid="'+fObj.id+'" miniAvatar="'+fObj.miniAvatar+'" sex="'+fObj.sex+'" signature="'+fObj.signature+'" nickname="'+fObj.nickname+'" remark="'+f.remark+'" area="'+fObj.area+'" href="javascript:;" style="height: 50px;padding-left: 14px;padding-top: 7px;">';
						if (fObj.miniAvatar) {
							html += '<img class="mui-media-object mui-pull-left" src="' + fObj.miniAvatar + '" style="border-radius: 5px;width: 35px;height: 35px;">';
						} else {
							html += '<img class="mui-media-object mui-pull-left" src="" style="border-radius: 5px;width: 35px;height: 35px;">';
						}
						html += '<div class="mui-media-body" style="margin-top: 8px; font-size: 15px;">';
						if (f.remark) {
							html += f.remark;
						} else {
							html += fObj.nickname;
						}
						html += '</div>';
						html += '</a>';
						html += '</li>';
						html += '</div>';
		
						liEle.insertAdjacentHTML('afterend', html);
						
						 // 给每个好友添加触屏事件
						var friendLink = document.querySelector('[fid="' + fObj.id + '"]');
						if (friendLink) {
							friendLink.addEventListener('tap', function(event) {
								var fid = this.getAttribute('fid');
								var data = {
									'id': fid,
									'miniAvatar' : this.getAttribute('miniAvatar'),
									'sex' : this.getAttribute('sex'),
									'signature' : this.getAttribute('signature') ? this.getAttribute('signature') : '',
									'nickname' : this.getAttribute('nickname'),
									'area' : this.getAttribute('area'),
									'remark': this.getAttribute('remark'),
									'from': 'friend',
									'type': 'singleChat',  // 单聊标识
								}
								// 处理点击事件，例如跳转到好友详情页
								mui.openWindow({
									url: 'searchResult.html',
									id: 'searchResult.html',
									extras: { //向新页面传参
										'data': data
									}
								})
							});
						}
					} else {
						// 删除好友索引
						liEle.style.display = "none";
					}
				}
		    }
			
		</script>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="box-shadow: none;">
			<div>
				<h1 class="mui-title">通讯录</h1>
				<div href="" class="mui-icon mui-icon-search" style="position: absolute;right: 50px;"></div>
				<div class="dropdown">
					<button id="addFriendButton" href="" class="mui-icon mui-icon-close" style="position:absolute; right: 15px; color: black; border: none; background: none;transform: rotate(45deg);">
						<div class="dropdown-content" style="transform: rotate(-45deg); top:65px; left: -25px;min-width: 130px;">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
								    <a class="mui-icon mui-icon-chatbubble" style="color: white;"><label class="text">发起群聊</label></a>
								</li>
								<li class="mui-table-view-cell">
								    <a id="addFriendBtn" class="mui-icon mui-icon-personadd"  style="color: white;"><label class="text">添加好友</label></a>
								</li>
							</ul>
						</div>
					</button>
				</div>
			</div>
		</header>
		
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<!-- <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场"> -->
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
					<a>#</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="refreshContainer">
						<li class="mui-table-view-cell">
							<a href="javascript:;" id="go_new_friend" style="height: 50px;padding-left: 14px;padding-top: 7px;">
								<img class="mui-media-object mui-pull-left" src="image/newFriend.png" style="border-radius: 5px;width: 35px;height: 35px">
								<div class="mui-media-body" style="margin-top: 8px; font-size: 15px;">新的朋友</div>
								<span class="mui-badge mui-badge-danger" style="display: none;" id="badge"></span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="javascript:;" style="height: 50px;padding-left: 14px;padding-top: 7px;">
								<img class="mui-media-object mui-pull-left" src="image/chatGroup.png" style="border-radius: 5px;width: 35px;height: 35px">
								<div class="mui-media-body" style="margin-top: 8px; font-size: 15px;">群聊</div>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="javascript:;" style="height: 50px;padding-left: 14px;padding-top: 7px;">
								<img class="mui-media-object mui-pull-left" src="image/biaoqian.png" style="border-radius: 5px;width: 35px;height: 35px">
								<div class="mui-media-body" style="margin-top: 8px; font-size: 15px;">标签</div>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="javascript:;" style="height: 50px;padding-left: 14px;padding-top: 7px;">
								<img class="mui-media-object mui-pull-left" src="image/gzh.png" style="border-radius: 5px;width: 35px;height: 35px">
								<div class="mui-media-body" style="margin-top: 8px; font-size: 15px;">公众号</div>
							</a>
						</li>
						<li id="py_a" data-group="A" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">A</li>
						<li id="py_b" data-group="B" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">B</li>
						<li id="py_c" data-group="C" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">C</li>
						<li id="py_d" data-group="D" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">D</li>
						<li id="py_e" data-group="E" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">E</li>
						<li id="py_f" data-group="F" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">F</li>
						<li id="py_g" data-group="G" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">G</li>
						<li id="py_h" data-group="H" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">H</li>
						<li id="py_j" data-group="J" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">J</li>
						<li id="py_k" data-group="K" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">K</li>
						<li id="py_l" data-group="L" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">L</li>
						<li id="py_m" data-group="M" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">M</li>
						<li id="py_n" data-group="N" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">N</li>
						<li id="py_p" data-group="P" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">P</li>
						<li id="py_q" data-group="Q" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">Q</li>
						<li id="py_r" data-group="R" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">R</li>
						<li id="py_s" data-group="S" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">S</li>
						<li id="py_t" data-group="T" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">T</li>
						<li id="py_w" data-group="W" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">W</li>
						<li id="py_x" data-group="X" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">X</li>
						<li id="py_y" data-group="Y" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">Y</li>
						<li id="py_z" data-group="Z" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">Z</li>		
						<li id="py_#" data-group="#" class="mui-table-view-divider mui-indexed-list-group" style="height:25px; font-size:12px; display:none;">#</li>		
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>
 <style>     
	html,
	body {
		height: 100%;
		overflow: hidden;
	}
	.mui-bar {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.dropdown-content {
		display: none;
		position: absolute;
		min-width: 100px;
		z-index: 1;
	}
	.text{
		color: white;
		padding: 10px 10px;
		font-size: 14px;
	}
	.dropdown-content a{
		border-radius: 6px;
	}
	.dropdown-content ul {
		border-radius: 6px;
		background-color: #595959;
	}
	.dropdown:hover .dropdown-content {
		display: block;
	}
	
</style>